var path = require('path');
var { CleanWebpackPlugin } = require('clean-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CopyWebpackPlugin = require('copy-webpack-plugin');
var webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'output')
  },
  // devtool: 'source-map', // sourceMap, 5个关键字组合成7种模式
  // 集中配置webpack 功能优化选项
  optimization: {
    // 只导出那些被外部使用了的成员
    useExports: true,
    // 将未使用的模块压缩剔除
    minimize: true,
    // 尽可能将所有模块合并输出到一个函数中,
    // 既提升运行效率，又减少了代码体积
    concatenateModules: true
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /.css$/,
        use: [
          'style-loader', // 将css-loader转化结果通过style插入到页面上
          'css-loader' // 将CSS转成JS
        ]
      },
      {
        test: /.jpg|.png$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024 // kb
          }
        }
      },
      // {
      //   test: /.html$/,
      //   use: {
      //     loader: 'html-loader',
      //     options: {
      //       attrs: ['img:src', 'a:href']
      //     }
      //   }
      // }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    // 生成index.html
    new HtmlWebpackPlugin({
      title: 'webpack plugin sample',
      meta: {
        viewport: 'width=device-width'
      },
      template: './public/index.html' // 解析模板语法
    }),
    // 生成多个页面文件,有问题
    // new HtmlWebpackPlugin({
    //   filename: 'about.html'
    // }),
    // 开发阶段如果静态文件过多，频繁的操作copy是一件耗费时间和性能的事情，此时可以在开发阶段，配置devServer中的contentBase路径，解决开发阶段静态资源访问的问题；
    // new CopyWebpackPlugin({
    //   patterns: [ './public/abc.txt' ]
    // })
    new webpack.DefinePlugin({
      API_BASE_URL: 'https://www.baidu.com'
    })
  ],
  devServer: {
    hot: true,
    contentBase: './public', // 静态资源访问路径
    proxy: {
      'api/': {
        // 将api/开头的接口地址，代理到真是的目标地址
        // http://loaclhost:8080/api/users => https://api.github.com/api/users
        target: 'https://api.github.com',
        // 真实目标地址中如果没有api前缀， 则需要重写api
        // http://loaclhost:8080/api/users => https://api.github.com/users
        pathRewrite: {
          '^/api': '' // 正则匹配前缀
        },
        // 服务器需要校验接口来源， 不能使用localhost：8080作为请求服务器的主机名
        changeOrigin: true
      }
    }
  }
}